<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="password" v-focus>
        <br>
        <input type="text">
        <br>
        <div v-color="colorMsg">中国好声音</div>
    </div>
</body>
<script>
    // 定义一个全局自定义指令，指令名，
    Vue.directive('focus',{
        inserted:function(el){ // 钩子函数，被绑定元素**插入**父节点时调用
            console.log(el); // DOM元素，被绑定元素**插入**父节点时调用（**父节点存在即可调用**，不必存在于 document 中）。
            el.focus();
            // el.style.backgroundColor = 'red';
        }
    })

    Vue.directive('color',{
        bind:function(el,sty){  // 初始化
            console.log(sty);
            el.style.background = sty.value.bg;
            el.style.color = sty.value.color;
            console.log('bind');
        },
        inserted:function(el){ // 钩子函数，被绑定元素**插入**父节点时调用 // 插入
            // console.log(el);
            console.log('inserted');  
        },
        update:function(){ // 更新
            console.log('update')
        },
        componentUpdated:function(){ // 更新完成
            console.log('componentUpdated')
        },
        unbind:function(){ // 解绑
            console.log('unbind');
        }
    })
    new Vue({
        el:'#app',
        data:{
            colorMsg:{
                bg:'yellow',
                color:'#fff'
            }
        }

    })
</script>
</html>